<template>
    <div class="pie" id="pie" style="width:744px;height:260px"></div>
</template>
<script>
export default {
  mounted () {
    this.init()
  },
  methods: {
    init () {
      const ydata = [
        {
          name: '加快',
          value: 24.96
        },
        {
          name: '平邮',
          value: 25.18
        },
        {
          name: '标准邮寄',
          value: 25.09
        },
        {
          name: '特快',
          value: 24.77
        }
      ];
      const color = [
        'rgb(155, 139, 186)',
        'rgb(224, 152, 199)',
        'rgb(143, 211, 232)',
        'rgb(113, 102, 158)'
      ];
      const xdata = ['加快', '平邮', '标准邮寄', '特快'];
      const myChart = this.$echarts.init(document.getElementById('pie'));
      const option = {
        title: {
          text: '饼图',
          left: '0',
          top: '10',
          textStyle: {
            color: 'rgb(85, 85, 85)',
            fontSize: 14,
            fontWeight: 400
          }
        },
        backgroundColor: 'rgba(255,255,255,1)',
        color: color,
        legend: {
          orient: 'vartical',
          x: 'left',
          top: '25%',
          left: '86%',
          bottom: '0%',
          data: xdata,
          align: 'right',
          itemWidth: 20,
          itemHeight: 14,
          //   上下间距
          //   itemGap: 15,
          formatter: function (name) {
            return name + '   ';
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            clockwise: false, // 饼图的扇区是否是顺时针排布
            minAngle: 20, // 最小的扇区角度（0 ~ 360）
            radius: ['45%', '60%'],
            center: ['40%', '63%'],
            avoidLabelOverlap: false,
            itemStyle: {
              // 图形样式
              normal: {
                //   borderColor: "#ffffff"
              }
            },
            label: {
              normal: {
                show: false,
                position: 'center',
                formatter: '{text|{b}}\n{value|{d}%}',
                rich: {
                  text: {
                    color: color,
                    fontSize: 14,
                    align: 'center',
                    verticalAlign: 'middle',
                    padding: 5
                  },
                  value: {
                    color: color,
                    fontSize: 14,
                    align: 'center',
                    verticalAlign: 'middle'
                  }
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: 46
                }
              }
            },
            data: ydata
          }
        ]
      };
      myChart.setOption(option);

      triggerToolTip(myChart)
      function triggerToolTip (myChart) {
        let index = 0;
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: 0
        })
        setInterval(function () {
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: [0, 1, 2, 3, 4]
          })
          index--;
          if (index < 0) {
            index = 4;
          }
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: index
          })
        }, 3000)

        myChart.on('mouseover', e => {
          if (e.dataIndex !== index) {
            myChart.dispatchAction({
              type: 'downplay',
              seriesIndex: 0,
              dataIndex: index
            })
          }
        })
        myChart.on('mouseout', e => {
          index = e.dataIndex
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: e.dataIndex
          })
        })
      }
    }
  }
}
</script>